<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--浏览器移动端预览-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>写博客</title>
        <link rel="stylesheet" href="../../static/css/semantic.min.css">
        <link rel="stylesheet" href="../../static/css/me.css">
        <link rel="stylesheet" href="../../static/libs/editormd/css/editormd.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    </head>
    <body>
        <!--首部-->
        <nav class="ui inverted attached segment m-padded-tb-mini m-opacity-mini m-shadow-small">
            <div class="ui container">
                <div class="ui inverted secondary stackable menu">
                    <h2 class="ui teal header item">管理后台</h2>
                    <!--menu-->
                    <a href="blogs.html" class="m-item item m-mobile-hide"><i class="archive icon"></i>博客</a>
                    <a href="#" class="active m-item item m-mobile-hide"><i class="idea icon "></i>分类</a>
                    <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>


                    <!--avatar box-->
                    <div class="right menu m-item m-mobile-hide">
                        <div class="ui dropdown item">
                            <div class="text">
                                <img src="../../static/images/me.jpg" alt="" class="ui avatar image">
                                天乔巴夏
                            </div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <a href="#" class="item"><i class="icon user"></i>个人资料</a>
                                <a href="#" class="item"><i class="icon logout"></i>退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <!--<a href="#" id="side" class="ui inverted icon button m-top-right m-mobile-show">-->
            <!--    <i class="sidebar icon"></i>-->
            <!--</a>-->
        </nav>

        <!--二级导航-->
        <div class="ui attached pointing menu m-container-small">
            <div class="ui container">
                <div class="left menu m-padded-lt">
                    <h3 class="ui teal left aligned header m-text-spaced">博客</h3>
                </div>
                <div class="right menu">
                    <a href="#" class="item">发布</a>
                    <a href="#" class=" teal active item">列表</a>
                </div>
            </div>
        </div>

        <!--中间部分-->
        <div class="m-container-small m-padded-tb-big">

            <div class="ui container">

                <form action="#" class="ui form" method="post">
                    <!--原创+标题-->
                    <div class="required field">
                        <div class="ui left labeled input">
                            <div class="ui teal basic compact selection dropdown label">
                                <input type="hidden" value="原创">
                                <i class="icon dropdown"></i>
                                <div class="text">原创</div>
                                <div class="menu">
                                    <div class="item" data-value="原创">原创</div>
                                    <div class="item" data-value="转载">转载</div>
                                    <div class="item" data-value="翻译">翻译</div>
                                </div>
                            </div>
                            <input type="text" name="title" placeholder="标题">
                        </div>

                    </div>
                    <!--博客内容-->
                    <div  class="field">
                        <div id="editormd" style="z-index: 1 !important;">
                            <textarea style="display:none;" name="content"  placeholder="博客内容"></textarea>
                        </div>
                    </div>


                    <!--分类和标签-->
                    <div class="two fields">
                        <div class="field">
                            <div class="ui left labeled action input">
                                <label  class="ui compact teal basic label">分类</label>
                                <div class="ui fluid selection dropdown">
                                    <input type="hidden" name="type">
                                    <i class="icon dropdown"></i>
                                    <div class="default text">分类</div>
                                    <div class="menu">
                                        <div class="item" data-value="1">错误日志</div>
                                        <div class="item" data-value="2">开发者手册</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left labeled action input">
                                <label  class="ui compact teal basic label">标签</label>
                                <div class="ui fluid multiple search selection dropdown">
                                    <input type="hidden" name="tag">
                                    <i class="icon dropdown"></i>
                                    <div class="default text">标签</div>
                                    <div class="menu">
                                        <div class="item" data-value="1">Java</div>
                                        <div class="item" data-value="2">Python</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--首图引用-->
                    <div class="field">
                        <div class="ui left labeled input">
                            <label class="ui teal basic label">首图</label>
                            <input type="text" name="indexPicture" placeholder="首图引用地址">
                        </div>
                    </div>
                    <!--推荐+转载声明+赞赏+留言-->
                    <div class="ui segment ">
                        <div class="inline fields middle aligned aligned" style="margin-bottom: 0;">
                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox" name="recommend" checked id="recommend" class="hidden">
                                    <label for="recommend">推荐</label>
                                </div>
                            </div>

                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox" name="shareInfo" id="shareInfo" class="hidden">
                                    <label for="shareInfo">转载声明</label>
                                </div>
                            </div>

                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox" name="appreciate" id="appreciate" class="hidden">
                                    <label for="appreciate">赞赏</label>
                                </div>
                            </div>

                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox" name="comment" id="comment" class="hidden">
                                    <label for="comment">留言</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--错误信息-->
                    <div class="ui error message"></div>
                    <!--底部按钮-->
                    <div class="ui right aligned container">
                        <button type="button" onclick="window.history.go(-1)" class="ui button">
                            返回
                        </button>
                        <button class="ui secondary button">保存</button>
                        <button class="ui teal button">发布</button>
                    </div>
                </form>
            </div>
        </div>


        <!--底部-->
        <footer class="ui inverted segment vertical m-padded-tb-massive m-padded-bottom-small">
            <div class="ui center aligned container">
                <!--16-->
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="../../static/images/contact/wechat.dib" alt="" class="ui rounded image"
                                     style="width: 110px">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Email: 1332790762@qq.com</a>
                            <a href="#" class="item">Phone: 123456789</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header m-opacity-mini">关于我</h4>
                        <p class="m-text-thin m-text-spaced m-opacity-mini">
                            Java小白，从零单排。文章如果有叙述不当的地方，还望评论区批评指正。当然，如果觉得文章对你有帮助，可以点个小小的推荐，或者关注我，一起交流，共同进步！</p>
                    </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright ©2020 天乔巴夏 浙ICP备20020653号</p>
            </div>

        </footer>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="../../static/js/jquery-3.5.1.min.js"></script>
        <script src="../../static/libs/editormd/editormd.min.js"></script>
        <script src="../../static/libs/editormd/editormd.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
        <script src="../../static/js/semantic.min.js"></script>

        <script type="text/javascript">
			var editor;

			$(function() {
				editor = editormd("editormd", {
					width   : "100%",
					height  : 640,
					syncScrolling : "single",
					path    : "../../static/libs/editormd/lib/"
				});

				/*
                // or
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "../libs/"
                });
                */
			});

			$('#side').click(function () {
				$('.m-item').toggleClass('m-mobile-hide');
			})
			$('.ui.dropdown').dropdown({
				on: 'hover'
			})

            $('.ui .form').form({
                fields:{
                	title : {
                		identifier : 'title',
                        rules:[{
                			type:'empty',
                            prompt: '标题: 请输入博客标题'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>